<template>
    <!-- 订单信息列表展示 -->
    <!-- yb 2023年4月4日 16点43分 -->
    <div id="order_list" v-loading="loading">
        <!-- 订单循环信息 -->
        <div  v-for="(item) in orderListData" :key="item.id" >
            <div class="div1" v-if="item.orderTypeId == 1">
                <div class="div2">
                    <p style="line-height: 20px;color: #000000;">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{item.createTime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>订单号： {{item.orderNumber}}</span>
                    </p>
                    <p v-if="item.status != '已付款'" style="width: 200px; height: 100%;  float: right; margin-right: 10px; margin-top: -53px; color: #000000;">
                        <CountDown1 class="countDown"
                            v-if="viewDialog"
                            v-on:start_callback="countDownS_cb(1)"
                            v-on:end_callback="countDownE_cb(1)"
                            :startTime=aaa
                            :endTime=Date.parse(item.expirationTime)
                            :dayTxt="'天'"
                            :hourTxt="'小时'"
                            :minutesTxt="'分钟'"
                            :secondsTxt="'秒'">
                        </CountDown1>
                    </p>
                </div>
                <div class="div3"> 
                    <div v-for="(item,index) in item.commodityOrderList" :key="index">
                    <div class="div3-1">
                        <el-image  style="width: 65px; height: 65px;float: left; margin-top: 20px;margin-left: 15px; " :src="`http://101.43.223.224:8765/image/getImageById?id=${item.imageId.split(',')[0]}`"></el-image>
                        <p style="width: 350px; height: 45px;line-height: 20px;font-size: 18px; float: left;margin-left: 10px;margin-top: 22px;">{{item.commodityName}}</p>
                        <p style="width: 30px; height: 45px;line-height: 20px;float: left;margin-left: 15px;margin-top: 22px;">x&nbsp;{{item.commodityQuantity}}</p>
                        </div>
                    </div>
                    <p v-if="item.status == '已付款' || item.status == '待评价'" @click="AfterSalesOrder(item)" style="width: 70px; color: red; height: 45px;line-height: 20px;float: left;;margin-left: -79px;margin-top: 22px;font-size: 16px; text-decoration: none;">申请售后</p>
                    <div class="div3-2">
                        <p style="line-height: 50px;float: left; margin-left: 25px;"><i class="el-icon-user"></i>&nbsp;{{item.addressConsignee}}</p>
                    </div>
                    <div class="div3-3">
                        <p style="float: left; margin-left: 25px; width: 100%;margin-top: 20px; color: rgb(135 135 135);color: #E4393C;font-weight: bold;">￥&nbsp;{{item.orderAmountTotal}}</p>
                        <p style="float:left;margin-top: -11px;text-align: center; width: 100%;height: 2px;background-color: rgb(112 103 103);color: rgb(135 135 135);">{{item.mode}}</p>
                    </div>
                    <div class="div3-4">
                        <p style="float: left; margin-left: 27px; width: 100%;margin-top: 24px; color: rgb(135 135 135);">{{item.status}}</p>
                        <p style="float: left; margin-left: 25px; width: 100%;margin-top: -12px;  text-decoration: none; cursor:pointer; " @click="OrderDetails(item)">订单详情</p>
                    </div>
                    <div class="div3-5" v-if="item.status == '已签收'">
                        <p style="float: left;text-align: center; width: 100%;margin-top: 24px; text-decoration: none; cursor:pointer;">评价|晒单</p>
                        <button  icon="el-icon-goods" style="width:110px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 5px;margin-top: 8px;">
                        立即购买</button>
                    </div>
                    <div class="div3-5" v-if="item.status == '未付款'">
                        <button @click="OrdersPay(item)" style="width:80px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 20px;margin-top: 10px;">
                        付款</button>
                        <button @click="cancellation(item.id)" style="float:left; margin-left:15px; margin-top:5px;"> 取消订单</button>
                    </div>
                    <div class="div3-5" v-if="item.status == '已付款' || item.status == '已发货'">
                        <button @click="ReturnsrefundsOrder()" style="float:left; margin-left:15px; margin-top:30px;">退货退款</button>
                    </div>
                    <div class="div3-5"  v-if="item.status == '待评价'">
                        <button @click="OrdersAppraise1(item)" style="width:100px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 10px;margin-top: 40px;">
                        评价</button>
                    </div>
                </div>
            </div>
            <div class="div1" v-if="item.orderTypeId == 2">
                <div class="div2-1">
                    <p style="line-height: 20px;color: #000000;">
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <span>{{item.createTime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                        <span>订单号： {{item.orderNumber}}</span>
                    </p>
                    <p v-if="item.status != '已付款'" style="width: 200px; height: 100%;  float: right; margin-right: 10px; margin-top: -53px; color: #000000;">
                        <!-- 结束时间过期后付款按钮消失 -->
                        <CountDown1 class="countDown"
                            v-if="viewDialog"
                            v-on:start_callback="countDownS_cb(1)"
                            v-on:end_callback="countDownE_cb(1)"
                            :startTime=aaa
                            :endTime=Date.parse(item.expirationTime)
                            :dayTxt="'天'"
                            :hourTxt="'小时'"
                            :minutesTxt="'分钟'"
                            :secondsTxt="'秒'">
                        </CountDown1>
                    </p>
                </div>
                <div class="div3">
                    <div  v-for="(item,index) in item.handworkDiyOrderList" :key="index">
                        <div class="div3-1">
                            <el-image  style="width: 65px; height: 65px;float: left; margin-top: 20px;margin-left: 15px; " :src='`http://101.43.223.224:8765/image/getImageById?id=${item.diyImageId}`'></el-image>
                            <p style="width: 350px; height: 45px;line-height: 20px;font-size: 18px; float: left;margin-left: 10px;margin-top: 22px;">{{item.diyName}}</p>
                            <p style="width: 30px; height: 45px;line-height: 20px;float: left;margin-left: 15px;margin-top: 22px;">x&nbsp;{{item.handworkDiyQuantity}}</p>
                        </div>
                    </div>
                    <p v-if="item.status == '已付款'|| item.status == '已发货' || item.status == '待评价'" @click="AfterSalesOrder1(item)" style="width: 70px;color: red; height: 45px;line-height: 20px;float: left;;margin-left: -79px;margin-top: 22px;font-size: 16px; text-decoration: none;cursor:pointer;">申请售后</p>
                    <div class="div3-2">
                        <p style="line-height: 50px;float: left; margin-left: 25px;"><i class="el-icon-user"></i>&nbsp;{{item.addressConsignee}}</p>
                    </div>
                    <div class="div3-3">
                        <p style="float: left; margin-left: 25px; width: 100%;margin-top: 20px; color: rgb(135 135 135);color: #E4393C;font-weight: bold;">￥&nbsp;{{item.orderAmountTotal}}</p>
                        <p style="float:left;margin-top: -11px;text-align: center; width: 100%;height: 2px;background-color: rgb(112 103 103);color: rgb(135 135 135);">{{item.mode}}</p>
                    </div>
                    <div class="div3-4">
                        <p style="float: left; margin-left: 27px; width: 100%;margin-top: 24px; font-size: 18px; color: rgb(135 135 135);">{{item.status}}</p>
                        <p style="float: left; margin-left: 25px; width: 100%;margin-top: -12px;font-size: 18px; text-decoration: none;cursor:pointer;" @click="DiyOrderDetails(item)">订单详情</p>
                    </div>
                    <div class="div3-5" v-if="item.status == '已签收'">
                        <a href="" style="float: left;text-align: center; width: 100%;margin-top: 24px; text-decoration: none">评价|晒单</a>
                        <button  icon="el-icon-goods" style="width:110px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 5px;margin-top: 8px;">
                        立即购买</button>
                    </div>
                    <div class="div3-5" v-if="item.status == '未付款'">
                        <el-button @click="OrdersPay(item)" style="width:80px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 20px;margin-top: 10px;">
                        付款</el-button>
                        <button @click="cancellationDiyOrder(item.id)" style="float:left; margin-left:15px; margin-top:5px;"> 取消订单</button>
                    </div>
                    <div class="div3-5" v-if="item.status == '已付款' || item.status == '已发货' ">
                        <button @click="ReturnsrefundsOrder()" style="float:left; margin-left:15px; margin-top:30px;">退货退款</button>
                    </div>
                    <div class="div3-5"  v-if="item.status == '待评价'">
                        <el-button @click="OrdersAppraise2(item)" style="width:100px; height: 35px; text-align: center; line-height: 15px; float: left; margin-left: 10px;margin-top: 40px;">
                        评价</el-button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { Col } from 'element-ui'
import CountDown1 from 'vue2-countdown'
export default {
    components: {
        CountDown1
    },
    data () {
        return {
            // 遮罩加载状态
            loading: false,
            // 订单信息列表数据
            orderListData: [],
            // 订单状态
            status: '',
			// 分页默认第几页
			currentPage4: 1,
            // 图片路径
            src:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            userId: 1,
            aaa: 0, // 获取当前时间
            viewDialog: true, // 倒计时刷新
            // expirationTime: 0, // 倒计时
            endTime: 0,
        }
    },
    mounted () {
        //获取用户id
        this.userId = window.sessionStorage.getItem('userId')
        this.getOrderListAll()
    },
    methods: {
        //退货退款订单
        ReturnsrefundsOrder () {
            this.$confirm('请联系客服暂时无法退款', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            })
        },
        //取消diy订单
        cancellationDiyOrder (orderId) {
            this.$confirm('是否取消这条订单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                const form =new FormData()
                form.set('orderId', orderId)
                this.$axios.post('/order/cancelDiyOrder', form).then(res => { 
                if (res.data.flag) {
                    this.getOrderListAll()
                    this.myMessage('success', '取消成功!')
                } else {
                    this.myMessage('warning', '取消失败!')
                }
                })
            }).catch(() => {
                this.myMessage('info', '已取消删除')
            })
        },
        //取消商品订单
        cancellation (orderId) {
            this.$confirm('是否取消这条订单', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'waning'
            }).then(() => {
                const form =new FormData()
                form.set('orderId', orderId)
                this.$axios.post('/order/cancelCommodityOrder', form).then(res => { 
                if (res.data.flag) {
                    this.getOrderListAll()
                    this.myMessage('success', '取消成功!')
                } else {
                    this.myMessage('warning', '取消失败!')
                }
                })
            }).catch(() => {
                this.myMessage('info', '已取消删除')
            })
        },
        countDownS_cb: function (x) { // 开始倒计时进行的回调
            // console.log(x, '开始')
        },
        countDownE_cb: function (x) { // 倒计时结束进行的回调
        },
        // 跳转到支付页面
        OrdersPay(item) {
            // debugger
            this.$axios.get("/order/getId", {
                params: {
                    id: item.id
                }
            }).then(res => {
                if (res.data.flag){
                    this.loading = true
                    let order = {
                        // 订单编号
                        orderNumber: item.orderNumber,
                        // 订单价格
                        price: item.orderAmountTotal,
                        // 订单标题
                        subjectName: item.orderTypeId,
                        // 订单支付单号
                        outTradeNo: item.outTradeNo
                    }
                    this.$axios.post("/Alipay/qrcode", order).then(res => {
                        if (res.data.flag) {
                            this.$router.push({
                                name: 'Alipay',
                                query: {
                                    // 订单编号
                                    orderNumber: this.$Base64.encode(res.data.data.orderNumber),
                                    // 订单价格
                                    price: this.$Base64.encode(res.data.data.price),
                                    // 二维码连接
                                    qrCode: this.$Base64.encode(res.data.data.QrCode),
                                    // 支付订单号
                                    outTradeNo: this.$Base64.encode(res.data.data.outTradeNo)
                                }
                            })
                        } else {
                            this.loading = false
                        }
                    })
                }else {
                    this.$alert('本订单付款时间已过期', '提示', {
                    confirmButtonText: '确定',
                    });
                }
            }).catch(() => {
                this.myMessage('info', '本订单付款时间已过期')
            })
            
            
        },
        // 商品跳转到售后页面
        AfterSalesOrder (item) {
            this.$router.push({name:'AfterSalesOrder', query:{userId:this.userId,id:item.id,orderNumber:item.orderNumber,orderAmountTotal:item.orderAmountTotal,commodityName:item.commodityOrderList[0].commodityName,createTime:item.createTime,orderTypeId:item.orderTypeId,status:item.status}})
        },
        // diy跳转到售后页面
        AfterSalesOrder1 (item) {
            
            this.$router.push({name:'AfterSalesOrder', query:{userId:this.userId,id:item.id,orderNumber:item.orderNumber,orderAmountTotal:item.orderAmountTotal,diyName:item.handworkDiyOrderList[0].diyName,createTime:item.createTime,orderTypeId:item.orderTypeId,status:item.status}})
        },
         // 跳转到商品订单详情
         OrderDetails (item) {
            this.$router.push({name:'order', query:{userId:this.userId,Coid:item.id}})
        },
        // 跳转到diy订单详情
        DiyOrderDetails (item) {
            this.$router.push({name:'DiyCorder', query:{userId:this.userId,Diyid:item.id}})
        },
        // 跳转到评价页面
        OrdersAppraise1 (item) {
            this.$router.push({name:'OrdersAppraise', query:{orderNumber:item.orderNumber,favorablePrice:item.orderAmountTotal,imageId:item.commodityOrderList[0].imageId,commodityName:item.commodityOrderList[0].commodityName,commodityId:item.commodityOrderList[0].cid}})
        },
        // 跳转到评价页面
        OrdersAppraise2 (item) {
            this.$router.push({name:'OrdersAppraise', query:{orderNumber:item.orderNumber,diyPrice:item.orderAmountTotal,diyImageId:item.handworkDiyOrderList[0].diyImageId,diyName:item.handworkDiyOrderList[0].diyName,commodityId:item.handworkDiyOrderList[0].hid}})
        },
        // 赋值status
        getStatus (status) {
            this.status = status
            if(this.status!=0){
                this.getStatusToOrder()
            }
            else{
                // 获取信息列表
                this.getOrderListAll()
            }
        },
        // 订单信息列表数据
        getOrderListAll () {
            this.aaa = parseInt(new Date().getTime() / 1000) // 倒计时获取当前时间作为开始时间
            this.viewDialog = false // 倒计时刷新
            this.$axios.get("/order/getMyAllOrderPc", {
                params: {
                    userId: this.userId,
                }
            }).then(res => {
                if (res.data.flag){
                    this.orderListData= res.data.data
                    this.viewDialog = true // 倒计时刷新
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        // 订单头部状态数据查询
        getStatusToOrder () {
            this.$axios.get("/order/getStatusToOrderPc", {
                params: {
                    userId: this.userId,
                    status: this.status-0
                }
            }).then(res => {
                if (res.data.flag){
                    this.orderListData= res.data.data
                }
            }).catch(() => {
                this.$message.error('获取信息失败！')
            })
        },
        // 消息提示框
        myMessage (type, message) {
        this.$message({
            message: message,
            type: type
        })
        }
    }
}
</script>

<style scoped>
#order_list{
    width: 100%;
    height: 100%;
    overflow-y: auto;
}
 
.div1{
    width: 1050px;
    height: 100%;
    background-color: #F5F5F5;
    margin: auto;
    border: 1px solid #E6E6E6;
    margin-top: 10px;

}
.div2{
    width: 100%;
    height: 50px;
    background-color: #FFF200  ;
    float: left;
    margin-top: 0px;
}
.div2-1{
    width: 100%;
    height: 50px;
    background-color: #efecac  ;
    float: left;
    margin-top: 0px;
}
.div3{
    width: 100%;
    height: 100%;
    background-color: #F5F5F5;
    float: left;
    margin-top: 0px;
}
.div3-1{
    width: 580px;
    height: 100px;
    float: left;
    border: 1px solid #E6E6E6;
}
.div3-2{
    width: 114px;
    height: 100px;
    float: left;
    margin-top: 0px;
    border: 1px solid #E6E6E6;
}
.div3-3{
    width: 114px;
    height: 100px;
    float: left;
    border: 1px solid #E6E6E6;
}
.div3-4{
    width: 114px;
    height: 100px;
    float: left;
    border: 1px solid #E6E6E6;
}
.div3-5{
    width: 118px;
    height: 100px;
    float: left;
    border: 1px solid #E6E6E6;
}
button {
 background: #FBCA1F;
 font-family: inherit;
 padding: 0.6em 1.3em;
 font-weight: 900;
 font-size: 13px;
 border: 3px solid black;
 border-radius: 0.4em;
 box-shadow: 0.1em 0.1em;
}

button:hover {
 transform: translate(-0.05em, -0.05em);
 box-shadow: 0.15em 0.15em;
}

button:active {
 transform: translate(0.05em, 0.05em);
 box-shadow: 0.05em 0.05em;
}
</style>